<!DOCTYPE html>
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="utf-8">
		<!--自动刷新，1s=1-->
		<!--<META http-equiv="Refresh" content="3">-->
		<!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
		<meta http-equiv="X-UA-Compatible" cotent="IE=edge,chrome=1" />
		<!--禁止缓存-测试时用-->
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<!--禁止缓存-测试时用-->
		<!--禁止禁止识别电话号码和邮件-->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!--禁止禁止识别电话号码和邮件-->
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<meta name="x5-orientation" content="portrait" />
		<meta name="x5-fullscreen" content="true" />
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="screen-orientation" content="portrait">
		<meta name="full-screen" content="yes">
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title></title>
		<style type="text/css">
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: blur(15px) contrast(30);
          filter: blur(15px) contrast(30);
  background: #fff;
}

.ball {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
          transform: translate(-50%, -50%) rotate(0deg);
  -webkit-transform-origin: 66px center;
          transform-origin: 66px center;
  margin-left: 40px;
}

.ball:before {
  content: '';
  width: 68px;
  height: 68px;
  position: absolute;
  top: 50%;
  left: -10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 100%;
  background: #f00;
}

.ball-1 {
  margin-left: -50px;
}

.ball-2 {
  margin-left: 25px;
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
  margin-left: -100px;
  -webkit-animation: rotate-1 1.7s linear infinite;
          animation: rotate-1 1.7s linear infinite;
  z-index: 2;
}

@-webkit-keyframes rotate-1 {
  0% {
    margin-left: -18px;
    -webkit-transform: translateY(-50%) rotate(0deg);
            transform: translateY(-50%) rotate(0deg);
    -webkit-transform-origin: 66px center;
            transform-origin: 66px center;
  }
  25% {
    margin-left: -25px;
    -webkit-transform: translateY(-50%) rotate(-180deg);
            transform: translateY(-50%) rotate(-180deg);
    -webkit-transform-origin: 66px center;
            transform-origin: 66px center;
  }
  50% {
    margin-left: -33px;
    -webkit-transform: translateY(-50%) rotate(-360deg);
            transform: translateY(-50%) rotate(-360deg);
    -webkit-transform-origin: 66px center;
            transform-origin: 66px center;
  }
  50.1% {
    -webkit-transform-origin: -12px center;
            transform-origin: -12px center;
  }
  75% {
    margin-left: -36px;
    -webkit-transform: translateY(-50%) rotate(-180deg);
            transform: translateY(-50%) rotate(-180deg);
    -webkit-transform-origin: -12px center;
            transform-origin: -12px center;
  }
  75.01 {
    margin-left: -66px;
    -webkit-transform: translateY(-50%) rotate(-180deg);
            transform: translateY(-50%) rotate(-180deg);
    -webkit-transform-origin: -12px center;
            transform-origin: -12px center;
  }
  100% {
    margin-left: -18px;
    -webkit-transform: translateY(-50%) rotate(0deg);
            transform: translateY(-50%) rotate(0deg);
    -webkit-transform-origin: -12px center;
            transform-origin: -12px center;
  }
}

@keyframes rotate-1 {
  0% {
    margin-left: -18px;
    -webkit-transform: translateY(-50%) rotate(0deg);
            transform: translateY(-50%) rotate(0deg);
    -webkit-transform-origin: 66px center;
            transform-origin: 66px center;
  }
  25% {
    margin-left: -25px;
    -webkit-transform: translateY(-50%) rotate(-180deg);
            transform: translateY(-50%) rotate(-180deg);
    -webkit-transform-origin: 66px center;
            transform-origin: 66px center;
  }
  50% {
    margin-left: -33px;
    -webkit-transform: translateY(-50%) rotate(-360deg);
            transform: translateY(-50%) rotate(-360deg);
    -webkit-transform-origin: 66px center;
            transform-origin: 66px center;
  }
  50.1% {
    -webkit-transform-origin: -12px center;
            transform-origin: -12px center;
  }
  75% {
    margin-left: -36px;
    -webkit-transform: translateY(-50%) rotate(-180deg);
            transform: translateY(-50%) rotate(-180deg);
    -webkit-transform-origin: -12px center;
            transform-origin: -12px center;
  }
  75.01 {
    margin-left: -66px;
    -webkit-transform: translateY(-50%) rotate(-180deg);
            transform: translateY(-50%) rotate(-180deg);
    -webkit-transform-origin: -12px center;
            transform-origin: -12px center;
  }
  100% {
    margin-left: -18px;
    -webkit-transform: translateY(-50%) rotate(0deg);
            transform: translateY(-50%) rotate(0deg);
    -webkit-transform-origin: -12px center;
            transform-origin: -12px center;
  }
}

.ball-3 {
  margin-left: 120px;
}
		</style>
	</head>

	<body>
<div class="wrapper">
  <div class="ball ball-1"></div>
  <div class="ball ball-2"></div>
  <div class="ball ball-3"></div>
</div>
	</body>

</html>